<template>

    <a-card :bordered="false">
        <a-page-header title="方法(methods)"/>
        <LAceEditor ref="LAceEditor" @change="onChange" :content="content" height="600px" theme="tomorrow_night_bright" lang="json"></LAceEditor>            
        <!-- <MonacoEditor language="text" theme="myTheme" :editorMounted="onEditorMounted" :options="options" @change="onChange" style="height:70vh"></MonacoEditor> -->
    </a-card>
    
</template>

<script>


import {SysMixin} from '@/mixins/SysMixin'
import defaultSettings from '@/config/defaultSettings'
import LAceEditor from '@/components/lt/LAceEditor'
import MonacoEditor from 'monaco-editor-vue'
import * as monaco from 'monaco-editor'






export default {
    name:'pageMethods',
    components:{LAceEditor,MonacoEditor },
    mixins:[SysMixin],
    props:{
        SysPage:{
            type:Object,
            default:()=>{},
            required:true
        }
      
    },
    data(){
        return{
            defaultSettings,
            title:'',
            content:this.SysPage.echoData.code.methods,
            options: {
                value: '', // 初始值
                foldingStrategy: 'indentation', // 代码折叠
                automaticLayout: true, // 自适应布局
                overviewRulerBorder: false, // 不要滚动条的边框
                autoClosingBrackets: 'always',// 自动添加结束括号
                tabSize: 2, // tab 缩进长度
                minimap: {
                    enabled: false, // 不要小地图
                },
            },
        }
    },

    methods:{
        
        
        onChange(content){
            this.SysPage.echoData.code.methods=content
        },
        onEditorMounted(editor, monaco) {
          window.editor = editor
          window.monaco = monaco
        },

       
    },
    mounted(){

        this.$nextTick(() => {
            /*
            monaco.editor.defineTheme('myTheme', {
                base: 'vs-dark',
                inherit: true,
                rules: [
                    { token: 'custom-tag', foreground: '000000' }, //自定义类名的字体颜色
                    { token: 'custom-keywords', foreground: '000000' },
                    { token: 'custom-attributeName', foreground: '000000' },
                    { token: 'custom-attributeValue', foreground: '000000' },
                ],
                colors: {
                    'editor.background': '#000000', //编辑器背景颜色
                    'editorLineNumber.foreground': '#ffffff', //行号颜色
                    'editorLineNumber.activeForeground': '#000000', //当前行号颜色
                    'editor.lineHighlightBackground': '#000000', // 当前行背景色
                    'editorGutter.background': '#000000', //行号背景色
                }
            })
            editor.setValue(this.SysPage.echoData.code.methods) 
            */ 
        })

    
    }

}
</script>


